{% set isNarrow = true %} {% extends "./nav.html" %} {% block content %}

<!-- 注册页面 -->


<div class="container">
    {% if isLogin %}
    <p>欢迎{{userName}}您已登录，请返回<a href="/">首页</a></p>
    {% else %}
    <form>
        <h1>注册</h1>
        <hr>
        <div class="form-group">
            <label for="input-username">用户名</label>
            <input type="text" class="form-control" id="input-username" placeholder="请输入用户名">
            <p class="username-info"></p>

        </div>
        <div class="form-group">
            <label for="input-password">密码</label>
            <input type="password" class="form-control" id="input-password" placeholder="请输入密码">
        </div>
        <div class="form-group">
            <label for="repeat-input-password">确认密码</label>
            <input type="password" class="form-control" id="repeat-input-password" placeholder="请再次输入密码">
            <p class="password-info"></p>
        </div>
        <div class="form-group">
            <label for="select-gender">性别</label>
            <select class="form-control" id="select-gender">
        <option value="1">男</option>
        <option value="2">女</option>
        <option value="3">保密</option>
      </select>
        </div>
        <button type="submit" class="btn btn-primary register">注册</button>
        <a href="/login">已有账号返回登陆>></a>

    </form>
    {% endif %}
</div>
{% endblock %} {% block js %}
<script>
    let usernameTimeoutId;
    let passwordTimeoutId;
    let isPasswordSame = false;
    let isUsernameExist = true;

    //监听用户名是否存在
    $("#input-username").on("input", function() {
        //防抖
        if (usernameTimeoutId) {
            clearTimeout(usernameTimeoutId);
        }

        usernameTimeoutId = setTimeout(function() {
            const userName = $("#input-username").val();
            ajax.post('/api/user/isExist', {
                userName
            }, function(err, data) {
                if (err) {
                    $(".username-info").text("用户名可用")
                    isUsernameExist = false;
                    return;
                }
                $(".username-info").text("用户名已存在")
                isUsernameExist = true;
            })
        }, 500)
    })

    //监听密码是否一致
    $("#repeat-input-password").on("input", function() {

            if (passwordTimeoutId) {
                clearTimeout(passwordTimeoutId)
            }

            passwordTimeoutId = setTimeout(function() {
                const password = $("#input-password").val();
                const repeatInputPassword = $("#repeat-input-password").val();

                if (password === repeatInputPassword) {
                    $(".password-info").text("两次密码一致")
                    $(".password-info").css({
                        color: "green"
                    })
                    isPasswordSame = true;
                } else {
                    $(".password-info").text("两次密码不一致")
                    $(".password-info").css({
                        color: "red"
                    })
                    isPasswordSame = false;
                }
            }, 500)
        })
        //注册事件
    $(".register").click(function(e) {
        //阻止表单默认行为（刷新页面）
        e.preventDefault();

        //判断用户名是否存在
        if (isUsernameExist) {
            alert("用户名已存在，请输入新的用户名！");
            return;
        }

        //如果两次密码不一致
        if (!isPasswordSame) {
            alert("两次密码不一致，请重新输入");
            return;
        }


        //获取用户名，密码，性别
        const userName = $("#input-username").val();
        const password = $("#input-password").val();
        const gender = parseInt($("#select-gender").val());
        ajax.post("/api/user/register", {
                userName,
                password,
                gender,
            }, function(err, data) {
                if (err) {
                    alert(err);
                    return;
                }
                location.href = "/login"

            })
            // $.ajax({
            //     type: "post",
            //     url: "/api/user/register",
            //     contentType: "application/json;charset=utf-8",
            //     // JSON.parse()  将json格式的字符串转换为js对象
            //     // JSON.stringify() 将对象转换为json格式的字符
            //     data: JSON.stringify({
            //         userName,
            //         password,
            //         gender
            //     }),
            //     success: function(result) {
            //         console.log(result)
            //         if (result.errno === 0) {
            //             location.href = "/login"
            //         } else {
            //             alert(result.message)
            //         }
            //     },
            //     error: function(err) {
            //         console.log(err)
            //         alert("注册失败")
            //     }
            // })

    })
</script>

{% endblock %}